<template>
  <div class="chat-panel-container">
    <div class="chat-panel-header" style="-webkit-app-region: drag">
      <span style="-webkit-app-region: no-drag;">{{chatData.title}}</span>
      <svg-icon icon-class="more" style="-webkit-app-region: no-drag;"/>
    </div>
    <div :style="contentHeight" class="chat-panel-content">
      <div class="scrolling" id="scrolling">
        <ul :style="contentScrolling">
          <li class="history" @click="getHistory()">查看更多消息</li>
          <li :class="chatMessage.own ? 'pull-right' : 'pull-left'"
              class="chat-message-item"
              v-for="chatMessage in messages">
            <div class="avatar"><img :src="chatMessage.image" alt="头像"></div>
            <div :style="contentMaxWidth" class="content" v-html="chatMessage.content"></div>
          </li>
        </ul>
      </div>
    </div>
    <div class="chat-panel-drag-line"></div>
    <div :style="inputHeight" class="chat-panel-input" tabindex="-1" v-focus>
      <div class="editor-header">
        <div class="editor-icon" title="表情">
          <svg-icon class="emoji" icon-class="emoji"/>
        </div>
        <div class="editor-icon" title="发送文件">
          <svg-icon class="folder" icon-class="folder"/>
        </div>
        <div class="editor-icon" title="聊天记录">
          <svg-icon class="record" icon-class="record"/>
        </div>
      </div>
      <!--suppress JSUnresolvedVariable -->
      <div @blur="isLocked = false"
           @focus="isLocked = true"
           @input="message = $event.target.innerHTML"
           @keyup="editorContentKeyDown($event)"
           class="editor-content"
           id="editor-content"
           contenteditable="true"
           spellcheck="false"></div>
      <div class="chat-panel-submit">
        <el-button @click="sendMessage()" size="mini">发送(S)</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { debounce } from '../../../utils/index'
  import ChatController from '../../../socket/chatController'

  export default {
    props: {
      chatData: {
        type: Object,
        default() {
        }
      },
      messages: {
        type: Array
      }
    },
    directives: {
      focus: {
        // 指令的定义
        inserted: function(el) {
          el.focus()
        }
      }
    },
    data() {
      return {
        isMoving: false,
        visible: false,
        usableHeight: window.innerHeight - 20 - 40 - 0.5,
        usableWidth: window.innerWidth - 60 - 250,
        defaultScale: 0.7,
        contentHeight: {
          height: ''
        },
        contentScrolling: {
          maxWidth: ''
        },
        contentMaxWidth: {
          maxWidth: ''
        },
        inputHeight: {
          height: ''
        },
        message: '',
        isLocked: false
      }
    },
    watch: {
      'messages': 'scrollToBottom'
    },
    created() {
      this.setUsableHeight()
      this.setUsableWidth()
      this.resetDivideHeight(this.defaultScale)
      this.resetContentScrolling()
      this.resetContentMaxWidth()
    },
    mounted() {
      this._resizeHanlder = debounce(() => {
        // 根据当前的contentHeight和inputHeight的比例进行设置
        this.setUsableHeight()
        // const scale = this.calculateScale()
        // this.resetDivideHeight(scale)
        this.setUsableHeight()
        this.setUsableWidth()
        this.resetDivideHeight(this.defaultScale)
        this.resetContentScrolling()
        this.resetContentMaxWidth()
      }, 300)
      window.addEventListener('resize', this._resizeHanlder)
      // 滚动到最底部
      this.scrollToBottom()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this._resizeHanlder)
    },
    methods: {
      setUsableHeight() {
        this.usableHeight = window.innerHeight - 20 - 40 - 1
      },
      setUsableWidth() {
        this.usableWidth = window.innerWidth - 60 - 250
      },
      // calculateScale() {
      //   return parseInt(this.contentHeight.height.replace('px', '')) / this.usableHeight
      // },
      resetDivideHeight(scale) {
        this.contentHeight.height = this.usableHeight * scale + 'px'
        this.inputHeight.height = this.usableHeight * (1 - scale) + 'px'
      },
      resetContentScrolling() {
        this.contentScrolling.maxWidth = this.usableWidth - 7 + 'px'
      },
      resetContentMaxWidth() {
        this.contentMaxWidth.maxWidth = this.usableWidth * 0.5 + 13.934 + 'px'
      },
      editorContentKeyDown($event) {
        const keycode = window.event ? $event.keyCode : $event.which
        const evt = $event || window.event
        // ctrl+回车-->换行
        if (evt.ctrlKey && evt.keyCode === 13) {
          document.getElementById('editor-content').innerHTML = $event.target.innerHTML + '</br>'
          this.message = $event.target.innerHTML + '</br>'
          this.placeCaretAtEnd(document.getElementById('editor-content'))
        } else if (keycode === 13 && !(evt.ctrlKey)) { // 回车-->发送消息
          // 发送消息的代码
          this.sendMessage()
          $event.preventDefault()
        }
      },
      placeCaretAtEnd(el) {
        el.focus()
        const range = document.createRange()
        range.selectNodeContents(el)
        range.collapse(false)
        const sel = window.getSelection()
        sel.removeAllRanges()
        sel.addRange(range)
      },
      sendMessage() {
        if (this.message !== '') {
          // 发送消息
          ChatController.submit(this.chatData.id, this.message)
          // 通知消息总线
          this.$bus.$emit('send-message', {
            to: this.chatData.id,
            content: this.message
          })
          // 清空
          this.clearContent()
        } else {
          this.$message({
            message: '不能发送空白消息',
            type: 'warning'
          })
        }
      },
      clearContent() {
        document.getElementById('editor-content').innerHTML = ''
        this.message = ''
      },
      scrollToBottom() {
        this.$nextTick(() => {
          const div = document.getElementById('scrolling')
          div.scrollTop = div.scrollHeight
        })
      },
      getHistory() {
        // 获取历史消息
        // 从服务器获取历史消息
      }
    }
  }
</script>
